<template>
  <div>
    <a-modal
      v-model="productTeamData.show"
      width="800px"
      style="overflow:hidden"
      @cancel="handleClose"
      class="productTeam"
    >
      <div slot="title">
        <span>产品组合</span>
      </div>
      <el-row>
          <el-col :span="5" style="border-right: #dbdbdb solid 1px;padding: 20px 0 0 20px;min-height:300px">
            <ul class="team-ul">
                <li :class="curIndex == index?'cur':''" @click="handleType(item,index)" v-for="(item,index) in groupListta" :key="index">{{item.groupName}}</li>
            </ul>
            <el-button type="text" icon="el-icon-plus" @click="handleAdd">添加新组合</el-button>
          </el-col>
          <el-col :span="19" style="padding: 30px 30px 0 30px">
              <el-form
                :model="parames"
                :rules="rules"
                label-position="left"
                ref="parames"
                label-width="94px"
                class="addForm"
                size="small">
                <el-row :gutter="40" >
                    <el-col :span="24">
                        <el-form-item label="组合名称:" prop="groupName">
                        <el-input size="small" v-model="parames.groupName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="产品内容:" prop="productIds">
                            <a-tree-select
                                showSearch
                                allowClear
                                style="width: 100%"
                                :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                                :treeData="gData"
                                treeNodeFilterProp="title"
                                placeholder="请选择"
                                treeDefaultExpandAll
                                treeCheckable
                                @change="onChange"
                                v-model="parames.productIds"
                                >
                            </a-tree-select>
                        </el-form-item>
                    </el-col>  
                </el-row>
            </el-form>
          </el-col>
      </el-row>
    <template slot="footer">
        <el-button size="small" type="danger" @click="handleDelete" :disabled="parames.id?false:true">删除组合</el-button>
        <el-button size="small" type="primary" :loading="loadingBtn" @click="handleSend">保存</el-button>
        <el-button size="small" @click="handleClose">取消</el-button>
    </template>
    </a-modal>
  </div>
</template>

<script>
/*
一级菜单需要添加菜单名称/图标/序号
二级菜单需要添加菜单名称/url/父级菜单/序号
*/
export default {
  props: ["productTeamData"],
  data() {
    return {
      loadingBtn: false,
      gData: [],
      parames: {
        id: '',
        groupName: "", //类型名称
        productIds: []
      },
      groupListta: [],
      rules: {
        groupName: [
          { required: true, message: "必填", trigger: "blur" },
        ],
        productIds: [
          { required: true, message: "必选", trigger: "blur" },
        ]
      },
      curIndex: '100000'
    };
  },
  mounted() {},
  methods: {
    handleClose() {
      //关闭弹窗
      this.productTeamData.show = false;
    },
    handleAdd () { //添加新组合
        this.parames.groupName = ''
        this.parames.id = ''
        this.parames.productIds = []
        this.curIndex = '100000'
    },
    handleDelete () { //删除组合
        this.$post(this.$api.postProductGroupDel,{
            productGroupId: this.parames.id
        }).then(response => {
            if (response.data.succeed) {
                this.postProductGroupList()
            }
        })
    },
    handleType (item,index) { //点击产品组合
        this.curIndex = index
        this.parames.groupName = item.groupName
        this.parames.id = item.id
        let productIds = []
        item.productList.forEach(el=>{
            productIds.push(el.id)
        })
        this.parames.productIds = productIds
    },
    handleSend () { //提交信息
      this.$refs['parames'].validate((valid) => {
        if (valid) {
          this.loadingBtn = true
          if (!this.parames.id) { //添加
            this.$post(this.$api.postProductGroupAdd,this.parames).then(response => {
              if (response.data.succeed) {
                  this.postProductGroupList()
              }
            })
          } else { //修改
            this.$post(this.$api.postProductGroupEdit,this.parames).then(response => {
              if (response.data.succeed) {
                  this.postProductGroupList()
              }
            })
          }
          setTimeout(() => {
            this.loadingBtn = false
          }, 300);
        }
      })
    },
    render () {
        this.postProductGroupList()
        this.getTree()
    },
    postProductGroupList () { //获取所有产品组合
        this.$post(this.$api.postProductGroupList).then(response => {
            if (response.data.succeed) {
                this.groupListta = response.data.data
                if (this.groupListta.length != 0) {
                    this.curIndex = 0
                    let item = this.groupListta[0]
                    this.parames.groupName = item.groupName
                    this.parames.id = item.id
                    let productIds = []
                    item.productList.forEach(el=>{
                        productIds.push(el.id)
                    })
                    this.parames.productIds = productIds
                }
            }
        })
    },
    getTree() { //获取所有产品
        this.$post(this.$api.postProviderProductListOnSale).then(response => {
            if (response.data.succeed) {
            this.gData = []
            if (response.data.data.length > 0) {
                response.data.data.forEach(el=>{
                    this.getData(el)
                        if (el.productName) {
                            this.gData.push(el)
                        }
                    })
                }
            }
        })
    },
    getData(data) { //处理树数据
        data.title = data.productName
        data.value = data.id
        data.key = data.id //
    },
    onChange (value,label, extra) {
        console.log(this.parames.productIds)
        // this.parames.productIds = value
    },
    restData () {
        this.parames.id = ""
        this.parames.typeName = "" //菜单路由
        this.parames.typeDesc = '' //功能类型
        this.$refs.parames.resetFields()
    }
  },
  computed: { //计算属性
    changeDialog () {
      return this.productTeamData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.render()
        } else {
          this.restData()
        }
      }
    },
    deep: true
  }
};
</script>

<style>
.productTeam .ant-modal-body{
    padding: 0;
}
.team-ul{

}
.team-ul li{
    cursor: pointer;
    line-height: 40px;
}
.team-ul li.cur{
    color: #409eff
}
</style>
